<template>
    <div id="course-center">
        <div class="title">智能分析</div>
   <div class = 'perWrapper'>
        <!--指向的线-->
    <div class="imgLineone" v-if="num1!='NaN'"  :style= "'background-image: url('+$qiniu.url+'assets/img/leftA.png)'"></div>
    <div class="imgLinetwo" v-if="num2!='NaN'" :style= "'background-image: url('+$qiniu.url+'assets/img/body.png)'"></div>
    <div class="imgLinethree" v-if="num3!='NaN'" :style= "'background-image: url('+$qiniu.url+'assets/img/leftF.png)'"></div>
    <div class="imgLinefour" v-if="num4!='NaN'" :style= "'background-image: url('+$qiniu.url+'assets/img/rightA.png)'"></div>
    <div class="imgLinefive" v-if="num5!='NaN'" :style= "'background-image: url('+$qiniu.url+'assets/img/rightF.png)'"></div>
    <!--人形的图-->
    <div class="partIcon"  v-if="getUserInfo.sex == '女' "
    :style= "'background-image: url('+$qiniu.url+'assets/img/perpart.png)'">
    </div>
    <div class="partIcon"  v-else-if=" getUserInfo.sex == '男' "
    :style= "'background-image: url('+$qiniu.url+'assets/img/prepart1.png)'">
    </div>
    <!--绘制的百分比-->
        <div  class="grade one" v-if="num1!='NaN'">
            <div class="imgwrapper" :class="{'imgwrapperOne':num1>=0.7}"></div>
            <div class="PartName">左臂</div>
            <div class="rightRate" id="leftA">{{parseInt((num1*100) > 100 ? 100 :(num1*100))}}%</div>
            <div class="canwrapper">
                <canvas id="myCanvas1" width="77px" height="77px"></canvas>
            </div>
            <div class="tips" v-if="num1>=0.6">(做的不错)</div>
        </div>
        <div class="grade two" v-if="num2!='NaN'">
            <div class="imgwrapper" :class="{'imgwrapperOne':num2>=0.7}"></div>
             <div class="PartName">身体</div>
             <div class="rightRate" id="bodymain">{{parseInt((num2*100) > 100 ? 100 :(num2*100))}}%</div>
            <div class="canwrapper">
                <canvas id="myCanvas2" width="77px" height="77px"></canvas>
            </div>
            <div class="tips" v-if="num2>=0.6">(做的不错)</div>
        </div>
        <div class="grade three" v-if="num3!='NaN'">
            <div class="imgwrapper" :class="{'imgwrapperOne':num3>=0.7}"></div>
            <div class="PartName">左腿</div>
            <div class="rightRate" id="leftF">{{parseInt((num3*100) > 100 ? 100 :(num3*100))}}%</div>
            <div class="canwrapper">
                <canvas id="myCanvas3" width="77px" height="77px"></canvas>
            </div>
            <div class="tips" v-if="num3>=0.6">(做的不错)</div>
        </div>
        <div class="grade four" v-if="num4!='NaN'">
            <div class="imgwrapper" :class="{'imgwrapperOne':num4>=0.7}"></div>
            <div class="PartName">右臂</div>
            <div class="rightRate" id="rightA">{{parseInt((num4*100) > 100 ? 100 :(num4*100))}}%</div>
            <div class="canwrapper">
                <canvas id="myCanvas4" width="77px" height="77px"></canvas>
            </div>
            <div class="tips" v-if="num4>=0.6">(做的不错)</div>
        </div>
        <div class="grade five" v-if="num5!='NaN'">
            <div class="imgwrapper" :class="{'imgwrapperOne':num5>=0.7}"></div>
            <div class="PartName">右腿</div>
            <div class="rightRate" id="rightF">{{parseInt((num5*100) > 100 ? 100 :(num5*100))}}%</div>
            <div class="canwrapper">
                <canvas id="myCanvas5" width="77px" height="77px"></canvas>
            </div>
            <div class="tips" v-if="num5>=0.6">(做的不错)</div>
        </div>
   </div>
    </div>
</template>
<script>
    import {
        setRange,
        errFun,
    } from "../../tools.js"
    import api from '../../api';
    export default {
        data() {
            return {
                num1: 0,
                color: "red",
                num2: 0,
                num3: 0,
                num4: 0,
                num5: 0,
            }
        },
        computed: {
            getUserInfo() {
                return this.$store.state.user
            },
        },
        methods: {
            SelectfontColor() {
                //根据正确率的不同，设置不同的字体颜色
                //左臂
                var leftA = document.querySelector(".one");
                var bodymain = document.querySelector(".two");
                var leftF = document.querySelector(".three");
                var rightA = document.querySelector(".four");
                var rightF = document.querySelector(".five");
                //左臂
                this.panduanR(this.num1, leftA);
                //身体
                this.panduanR(this.num2, bodymain);
                //左腿
                this.panduanR(this.num3, leftF);
                //右臂
                this.panduanR(this.num4, rightA);
                //右腿
                this.panduanR(this.num5, rightF);
            },
            //判断正确比率
            panduanR(num, id) {
                if (num >= 0.2) {
                    if (num >= 0.6) {
                        id.classList.add("fontColor2");
                        this.color = "#feb801";
                    } else {
                        id.classList.add("fontColor2");
                        this.color = "#feb801";
                    }
                } else {
                    id.classList.add("fontColor1");
                    this.color = "#fff"
                }
            },
            panduanC(num) {
                if (num >= 0.2) {
                    if (num >= 0.6) {
                        this.color = "#feb801";
                    } else {
                        this.color = "#feb801";
                    }
                } else {
                    this.color = "#fff"
                }
            },

            //获取数据的画图
            getArr() {
                var that = this;
                api.getResultBY(this.$route.params.id).then(function(result) {
                    var correct = result.data.result.newCorrectRate.length != 0 ? result.data.result.newCorrectRate : result.data.result.CorrectRate
                    that.num1 = (correct['1'] / 100).toFixed(2) || null;
                    that.num2 = (correct['0'] / 100).toFixed(2) || null;
                    that.num3 = (correct['3'] / 100).toFixed(2) || null;
                    that.num4 = (correct['2'] / 100).toFixed(2) || null;
                    that.num5 = (correct['4'] / 100).toFixed(2) || null;
                    that.panduanC(that.num1);
                    setRange("myCanvas1", (that.num1 != null ? that.num1 : 0) * 6.25, 36, that.color, 3);
                    that.panduanC(that.num2);
                    setRange("myCanvas2", (that.num2 != null ? that.num2 : 0) * 6.25, 36, that.color, 3);
                    that.panduanC(that.num3);
                    setRange("myCanvas3", (that.num3 != null ? that.num3 : 0) * 6.25, 36, that.color, 3);
                    that.panduanC(that.num4);
                    setRange("myCanvas4", (that.num4 != null ? that.num4 : 0) * 6.25, 36, that.color, 3);
                    that.panduanC(that.num5);
                    setRange("myCanvas5", (that.num5 != null ? that.num5 : 0) * 6.25, 36, that.color, 3);
                    //调用字体
                    that.SelectfontColor();
                }, errFun)
            }
        },
        mounted() {
            this.$nextTick(function() {
                //获取数据画图
                this.getArr();
            })
        },
    }
</script>
<style>
    #course-center {
        width: 90%;
        height: 500px;
        position: relative;
        /*background-color: #31384b;*/
        border: 1px solid #feb801;
        margin-left: 5%;
        padding-top: 10px;
        padding-bottom: 60px;
        box-sizing: border-box;
        margin-top: 40px;
        margin-bottom: 20px;
        .title {
            width: 50%;
            height: 40px;
            background-color: #feb801;
            /*margin-bottom: 20px;*/
            margin-left: 25%;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            color: #181818;
        }
        .perWrapper {
            width: 100%;
            height: 100%;
            position: relative;
            padding-top: 20px;
            padding-bottom: 20px;
            box-sizing: border-box;
        }
        .partIcon {
            width: 55%;
            height: 95%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
            position: absolute;
            top: 30px;
            left: 85px;
        }
        .grade {
            width: 77px;
            height: 77px;
            background-color: #161616;
            border-radius: 50%;
        }
        .grade .canwrapper {
            position: absolute;
            top: 0;
            left: 0;
        }
        .grade .PartName {
            position: absolute;
            /*color: #fff;*/
            top: 11px;
            left: 20px;
        }
        .grade .rightRate {
            position: absolute;
            /*color: #fff;*/
            top: 38px;
            left: 20px;
            font-weight: 700;
            font-size: 17px;
        }
        .fontColor1 {
            color: #fff!important;
        }
        .fontColor2 {
            color: #feb801!important;
        }
        .tips {
            position: absolute;
            top: 80px;
            left: 10px;
            font-size: 14px;
            color: #feb801;
        }
        .one {
            position: absolute;
            top: 12%;
            left: 3.333%;
        }
        .imgwrapperOne {
            width: 100%;
            height: 100%;
            background-color: rgba(254, 185, 1, .1)!important;
            border-radius: 50%;
            position: absolute;
        }
        .imgwrapper {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        .two {
            position: absolute;
            top: 40%;
            left: 8.333%;
        }
        .three {
            position: absolute;
            top: 75%;
            left: 7.333%;
        }
        .four {
            position: absolute;
            top: 10%;
            left: 75.333%;
        }
        .five {
            position: absolute;
            top: 67%;
            left: 76.333%;
        }
        .imgLineone {
            width: 25%;
            height: 100px;
            position: absolute;
            top: 56px;
            left: 67px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
        }
        .imgLinetwo {
            width: 25%;
            height: 100px;
            position: absolute;
            top: 175px;
            left: 96px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
        }
        .imgLinethree {
            width: 28%;
            height: 100px;
            position: absolute;
            top: 315px;
            left: 60px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
        }
        .imgLinefour {
            width: 25%;
            height: 100px;
            position: absolute;
            top: 52px;
            left: 210px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
        }
        .imgLinefive {
            width: 25%;
            height: 100px;
            position: absolute;
            top: 280px;
            left: 220px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 70%;
            margin: auto;
        }
    }
</style>